<template>
    <view class="c-wrap">
        <view class="header" :style="[customstyle]">
            <view class="header-back" v-if="!hideback"  @click="onBackTap">
                <image src="../../static/images/icon-back.png"></image>
            </view>
            <view class="header-title">
				<slot name="title">{{title}}</slot>
			</view>
            <view class="header-add" :style="[rstyle]" v-if="!hideRight" @click="$emit('rightclick')">
                <slot>
                    <image v-if="rtype === 'add'" src="../../static/images/icon-sales-add.png"></image>
                    <image v-if="rtype === 'del'" src="../../static/images/icon-del.png"></image>
					<image v-if="rtype === 'search'" src="../../static/images/icon-search-black.png"></image>
					<image v-if="rtype === 'share'" src="../../static/images/icon-share.png"></image>
					<text class="searchTextBtn" v-if="rtype === 'searchText'">搜索</text>
                </slot>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
			customstyle: {
				default() {
					return {}
				},
				type: Object,
			},
            title: {
                type: String,
                default: '布导航'
            },
			rtype: {
				type: String,
				default: 'add'
			},
			rstyle: {
				default() {
					return {}
				},
				type: Object
			},
			hideRight: {
				type: Boolean,
				default: false
			},
			hideback: {
				type: Boolean,
				default: false
			},
        },
        data() {
            return {
                
            }
        },
        onLoad(options) {

        },
        methods: {
            onBackTap() {
                const page = getCurrentPages()
                // console.log(page);
                if(page.length >= 2) {
                    uni.navigateBack()
                } else {
                    uni.switchTab({
                        url: '/pages/home/index'
                    })
                }
                this.$emit('leftclick')
            }
        }
    }
</script>

<style scoped lang="scss">
    .header {
		position: relative;
        width: 100vw;
        height: 98rpx;
        padding-top: var(--status-bar-height);
        box-sizing: content-box;
        display: flex;
        align-items: center;
		justify-content: center;
        background-color: #fff;
        z-index: 10086;
    }

    .header-back {
		position: absolute;
		left: 0;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        width: 100rpx;
        height: 60rpx;
        padding-left: 30rpx;

        image {
            width: 16rpx;
            height: 28rpx;
        }
    }
	
	.header-title {
		font-size: 36rpx;
	}

    .header-add {
		position: absolute;
		right: 0;
        width: 100rpx;
        height: 60rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        image {
            width: 34rpx;
            height: 34rpx;
        }
    }
	.searchTextBtn {
		font-size: 30rpx;
		color: $g-main-color;
	}
</style>
